<template>
  <view class="container">
    <view class="add-form">
      <view class="form-group">
        <image class="form-icon" src="../../static/icons/name.png" mode="aspectFit"></image>
        <text>姓名:</text>
        <input type="text" v-model="address.name" placeholder="请输入姓名" />
      </view>
      <view class="form-group">
        <image class="form-icon" src="../../static/icons/phone.png" mode="aspectFit"></image>
        <text>电话:</text>
        <input type="text" v-model="address.phone" placeholder="请输入电话" />
      </view>
      <view class="form-group">
        <image class="form-icon" src="../../static/icons/city.png" mode="aspectFit"></image>
        <text>城市:</text>
        <input type="text" v-model="address.city" placeholder="请输入城市" />
      </view>
      <view class="form-group">
        <image class="form-icon" src="../../static/icons/ress.png" mode="aspectFit"></image>
        <text>区域:</text>
        <input type="text" v-model="address.department" placeholder="请输入区域" />
      </view>
      <view class="form-group">
        <image class="form-icon" src="../../static/icons/door.png" mode="aspectFit"></image>
        <text>门牌号:</text>
        <input type="text" v-model="address.houseNumber" placeholder="请输入门牌号" />
      </view>
      <view class="form-group">
        <button class="submit-btn" @click="submitAddress">提交</button>
        <button class="cancel-btn" @click="navigateBack">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      address: {
        name: '',
        phone: '',
        city: '',
        department: '',
        houseNumber: ''
      },
      addressId: '1'
    };
  },
  onLoad() {
    this.getAddressById();
  },
  methods: {
    async getAddressById() {
      try {
        const response = await axios.get(`http://localhost:3000/address/${this.addressId}`);
        this.address = response.data;
      } catch (error) {
        console.error('获取地址信息失败:', error);
      }
    },
    async submitAddress() {
      try {
        await axios.put(`http://localhost:3000/address/${this.addressId}`, this.address);
        uni.showToast({
          title: '地址信息更新成功',
          icon:'success'
        });
        uni.navigateBack();
      } catch (error) {
        console.error('更新地址信息失败:', error);
        uni.showToast({
          title: '地址信息更新失败',
          icon: 'error'
        });
      }
    },
    navigateBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
page {
  background-color: #f8f8f8;
}

/* 全局样式 */
.container {
  padding: 40rpx;
  background-color: #f8f9fa;
  border-radius: 20rpx;
  margin: 50rpx auto;
  max-width: 50%;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.container:hover {
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.15);
}

/* 新增地址表单样式 */
.add-form {
  padding: 40rpx;
  border: 1rpx solid #dee2e6;
  border-radius: 15rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  position: relative;
  transition: all 0.3s ease;
}

.form-group:hover {
  transform: translateX(8rpx);
}

.form-icon {
  width: 35rpx;
  height: 35rpx;
  margin-right: 20rpx;
  filter: drop-shadow(0 2rpx 2rpx rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease;
}

.form-group:hover .form-icon {
  transform: scale(1.15);
}

.form-group text {
  font-size: 32rpx;
  color: #495057;
  width: 180rpx;
  margin-right: 25rpx;
}

.form-group input {
  flex: 1;
  padding: 20rpx;
  border: 1rpx solid #ced4da;
  border-radius: 12rpx;
  font-size: 32rpx;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus {
  border-color: #007bff;
  box-shadow: 0 0 8rpx rgba(0, 123, 255, 0.3);
}

.submit-btn {
  background-color: #007bff;
  color: white;
  padding: 20rpx 40rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  margin-right: 30rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 123, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.submit-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.submit-btn:hover {
  background-color: #0056b3;
  transform: translateY(-4rpx);
  box-shadow: 0 6rpx 10rpx rgba(0, 123, 255, 0.4);
}

.submit-btn:hover::before {
  opacity: 1;
}

.cancel-btn {
  background-color: #6c757d;
  color: white;
  padding: 20rpx 40rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
}

.cancel-btn:hover {
  background-color: #5a6268;
  transform: translateY(-4rpx);
  box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.4);
}
</style>